<template>
  <div class="playlist" @click="$parent.listshow=false" v-if="playlist && detail">
    <div class="listbox">
      <ul>
        <RecomItem
          v-for="(item, index) in playlist"
          :index="index + 1"
          @click.stop.native="$emit('updateCurrentSong', item);$emit('nihao',item)"
          :key="item.id"
          :item="item"
          :currentSong="currentSong"
          :playing="playing"
        ></RecomItem>
      </ul>
    </div>
  </div>
</template>

<script>
import RecomItem from "@/components/RecomItem.vue";
export default {
  props: ["playlist", "currentSong", "playing"],
  components: {
    RecomItem,
  },
  data: function () {
    return {
      detail: {},
    };
  },
};
</script>

<style lang="less" scoped>
.playlist {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  .listbox {
    width: 100%;
    height: 70%;
    border-radius: 20px 20px 0 0 ;
    background-color: #fff;
    padding: 10px 10px 70px 10px;
    overflow: hidden;
    overflow-y:auto;
  }
}
</style>